<template>
  <div>
    <a-card title="商品管理"
            style="width: 100%">
      <a slot="extra"
         href="#"
         @click="exportFile">导出为excel</a>
      <a-button type="primary"
                @click="$router.push('/admin/itemAdd')">
        增加商品</a-button>

      <a-table :columns="columns"
               rowKey="id"
               :pagination="{
             total:this.total,
             page:this.page,
             pageSize:this.pageSize
             }"
               :data-source="items"
               @change="change">
        <a slot="name"
           slot-scope="text">{{ text }}</a>
        <span slot="price"
              slot-scope="text">
          {{"￥"+text}}
        </span>
        <span slot="thumb"
              slot-scope="text">
          <img style="width:100px"
               :src="text" />
        </span>
        <span :title="text"
              slot="desc"
              slot-scope="text">
          {{text? text.substr(0,10) + '...':'暂无描述'}}
        </span>
        <div slot="operate"
             slot-scope="text, record">
          <a-button type="primary"
                    size="small"
                    :style="{ marginRight: '10px' }"
                    @click="edit(record.id)">
            编辑</a-button>
          <a-button type="danger"
                    size="small"
                    @click="del(record.id)">删除</a-button>
        </div>
      </a-table>
    </a-card>
  </div>
</template>
<script>
import { fetchArtList, delItem } from '@api'
import dayjs from 'dayjs'
import XLSX from 'xlsx'
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    title: '名称'
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    scopedSlots: { customRender: 'price' }
  },
  {
    title: '库存',
    dataIndex: 'store',
    key: 'store'
  },
  {
    title: '描述',
    key: 'desc',
    dataIndex: 'desc',
    scopedSlots: { customRender: 'desc' }
  },
  {
    title: '图片',
    key: 'thumb',
    dataIndex: 'thumb',
    scopedSlots: { customRender: 'thumb' }
  },
  {
    title: '销量',
    key: 'sale',
    dataIndex: 'sale'
  },
  {
    title: '上架时间',
    key: 'createAt',
    dataIndex: 'createAt'
  },
  {
    title: '操作',
    key: 'operate',
    scopedSlots: { customRender: 'operate' }
  }
]

export default {
  data () {
    return {
      data: [],
      columns,
      total: 0,
      page: 1,
      pageSize: 10,
      items: []
    }
  },
  created () {
    this.fetchArtList()
  },
  methods: {
    initExcelDate () {
      // 处理导出的excel数据
      const data = [
        ['id', '商品名称', '商品价格', '商品库存', '商品描述', '商品封面', '销量', '上架时间', '详情']
      ]
      this.items.forEach(item => {
        // console.log(item)
        data.push(Object.values(item))
      })
      // console.log(data);
      this.data = data
    },
    exportFile () {
      /* convert state to workbook */
      const ws = XLSX.utils.aoa_to_sheet(this.data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      /* generate XLSX file and send to client */
      XLSX.writeFile(wb, '商品列表数据.xlsx')
    },
    fetchArtList () {
      fetchArtList({
        page: this.page,
        pageSize: this.pageSize
      }
      ).then((res) => {
        if (res.data.code === 200) {
          this.items = res.data.data.list
          this.total = res.data.data.total
          this.items.map(item => {
            item.createAt = dayjs(item.createAt).format('YYYY-MM-DD')
          })
          this.initExcelDate()
        }
      })
    },
    change (page, pageSize) {
      this.page = page.current
      this.pageSize = page.pageSize
      this.fetchArtList()
    },
    edit (id) {
      this.$router.push(`/admin/itemUpdate/${id}`)
    },
    del (id) {
      this.$confirm({
        title: '删除商品',
        content: '你确定要删除吗?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          delItem(id).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.msg, 1, () => {
                this.$router.go(0)
              })
            }
          })
        }
      })
    }
  }
}

</script>
